<template>
	<view>
		<view style="margin-top: 20rpx;padding-bottom: 200rpx;background-color: white;">
			<uni-collapse ref="collapse" @change="change">
				<uni-collapse-item v-for="(list,index) in catalogData" :title="list.chapterName" :open="openStatus">
					<view class="content" v-for="(v,k) in list.section" @click="toPlay(v.cs_url,v.id,v.videoId)">
						<view style="display: flex;align-items: center;padding-left: 20rpx;">
							<image :src="labvideo" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
							</image>
							<text class="text" style="font-size: 26rpx;">{{v.name}}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import animationType from '@/utils/animationType.js'
	import {
		getCatalogById,
	} from '@/api/home.js';
	export default {
		components: {

		},
		props: {
			jumpId: {
				type: String,
				required: true,
				default: ''
			},
			hwId: {
				type: String,
				required: true,
				default: ''
			},
		},
		data() {
			return {
				openStatus: true,
				value: ['1'],
				catalogData: [],
				labvideo: require('../../../static/images/workshop/playcircle.png'),
			}
		},
		mounted() {
			let that = this;
			that.getCatalog();
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
		},
		methods: {
			returns() {
				uni.navigateBack();
			},
			toPlay(url, id, videoId) {
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/dailystudy/aliplayer?playurl=' + url + '&id=' + id + '&videoId=' + videoId +
						'&hwId=' + that.hwId,
				})
			},
			getCatalog() {
				let that = this;
				let pp = {};
				pp.userId = '-1';
				pp.token = '-1';
				pp.device = '-1';
				pp.id = that.jumpId;
				getCatalogById(pp).then(res => {
					if (res.code == 0) {
						that.catalogData = res.data;

						setTimeout(() => {
							that.$nextTick(() => {
								that.openStatus = true;
							})
						}, 300)

					}
				})
			},
			change(e) {
				console.log(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.example-body {
		flex-direction: column;
		flex: 1;
	}

	.content {
		padding: 15px;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}
</style>